<template>
  <div>
    <!-- 页头 -->
    <div class="page-header">
      <a-page-header @back="$router.go(-1)" title="文章管理">
      </a-page-header>
    </div>
    <!-- table 选项 -->
    <div class="table-filter">
      <a-select style="width: 300px;" v-model="blogQueryRequest.category" placeholder="请选择文章分类"
        @change="() => queryData()">
        <a-option>软件开发</a-option>
        <a-option>系统运维</a-option>
        <a-option>软件测试</a-option>
      </a-select>
    </div>
    <div style="display: flex; margin-top: 12px;">
      <div>
        <a-button @click="$router.push({ name: 'backend_blog_edit' })" type="primary">
          <template #icon>
            <icon-plus />
          </template>
          新建文章
        </a-button>
      </div>
      <div style="margin-left: auto;">
        <!-- https://eslint.vuejs.org/rules/no-deprecated-v-on-native-modifier.html -->
        <a-input-search v-model="blogQueryRequest.keywords" :style="{ width: '320px' }" placeholder="请输入关键字 敲回车键进行搜索"
          @search="() => queryData()" @keyup.enter="() => queryData()" />
      </div>
    </div>
    <div style="margin-top: 12px;">
      <a-table :pagination="false" :data="data.items" :loading="queryBlogLoadding">
        <template #columns>
          <a-table-column title="编码" data-index="id"></a-table-column>
          <a-table-column title="标题" data-index="title"></a-table-column>
          <a-table-column title="分类" data-index="category"></a-table-column>
          <a-table-column title="状态" data-index="stage"></a-table-column>
          <a-table-column title="更新时间">
            <template #cell="{ record }">
              <span>{{ dayjs(record.updated_at).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </a-table-column>
          <a-table-column align="center" title="操作">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" @click="$router.push({ name: 'backend_blog_edit', query: { id: record.id } })">
                  <template #icon>
                    <icon-edit />
                  </template>
                  编辑
                </a-button>
                <a-button type="primary" @click="publishBlog(record.id)">
                  <template #icon>
                    <icon-send />
                  </template>
                  发布
                </a-button>
                <a-popconfirm :okLoading="delteLoadding === record.id" @ok="deleteBlog(record.id)" type="warning"
                  :content="`是否需要删除【${record.title}】？`">
                  <a-button :loading="delteLoadding === record.id" status="danger">
                    <template #icon>
                      <icon-delete />
                    </template>
                    删除
                  </a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination :current="blogQueryRequest.page_number" :page-size="blogQueryRequest.page_size"
          :page-size-options="[2, 10, 20, 30, 50]" @change="pageNumberChanged" @page-size-change="pageSizeChanged"
          :total="data.total" show-total show-jumper show-page-size />
      </div>
    </div>
  </div>
</template>

<script setup>

import { onMounted, reactive, ref } from 'vue';
import { QUERY_BLOG, DELTE_BLOG, PUBLISH_BLOG } from '@/api/blog'
import dayjs from 'dayjs'

// API 请求数据
const blogQueryRequest = reactive({
  keywords: '',
  category: '',
  page_size: 10,
  page_number: 1,
})
// 数据, reactive, 一个一个修改每个属性的值 ({data...})
// ref   data.value = {}
const data = ref({})

// 查询函数
const queryBlogLoadding = ref(false)
const queryData = async () => {
  try {
    queryBlogLoadding.value = true
    data.value = await QUERY_BLOG(blogQueryRequest)
  } finally {
    queryBlogLoadding.value = false
  }
}

// 删除函数
const delteLoadding = ref(0)
const deleteBlog = async (id) => {
  try {
    delteLoadding.value = id
    // 等待这个操作执行完成
    await DELTE_BLOG(id)
    // 刷新数据
    queryData()
  } finally {
    delteLoadding.value = 0
  }
}

// 什么时候调用这个API, 加载数据, 界面准备好了后，再把数据渲染上去
onMounted(() => {
  queryData()
})

// 实现分页
const pageNumberChanged = (current) => {
  blogQueryRequest.page_number = current
  // 基于新的变化重新请求数据
  queryData()
}
const pageSizeChanged = (pageSize) => {
  blogQueryRequest.page_size = pageSize
  blogQueryRequest.page_number = 1
  // 基于新的变化重新请求数据
  queryData()
}


// 发布
const publishLoadding = ref(0)
const publishBlog = async (id) => {
  try {
    publishLoadding.value = id
    // 等待这个操作执行完成
    await PUBLISH_BLOG(id, { stage: "已发布" })
    // 刷新数据
    queryData()
  } finally {
    publishLoadding.value = 0
  }
}

</script>

<style lang="css" scoped>
.table-filter {
  border: 1px solid var(--color-border);
  border-radius: 2px 2px 0px 0px;
  height: 120px;
  padding: 12px;
}

:deep(.arco-page-header-wrapper) {
  padding-left: 0px;
}

.pagination {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>
